<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chrome DevTools Protocol Viewer{% if page.title %} - {{ page.title }}{% endif %}</title>

  <meta name="theme-color" content="#303F9F">

  <script src="{{ site.baseurl }}/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <script src="{{ site.baseurl }}/bower_components/web-animations-js/web-animations-next.min.js"></script>

  <link rel="import" href="{{ site.baseurl }}/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/app-layout/app-header/app-header.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/app-layout/app-toolbar/app-toolbar.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/app-layout/app-header-layout/app-header-layout.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/app-layout/app-drawer/app-drawer.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-styles/paper-styles-classes.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-listbox/paper-listbox.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-listbox/paper-listbox.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-item/paper-item.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-material/paper-material.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/iron-selector/iron-selector.html">

  <link rel="import" href="{{ site.baseurl }}/elements/cr-search-control/cr-search-control.html">

  <link href="{{ site.baseurl }}/styles/protocol.css" rel="stylesheet">
  <link rel="import" href="{{ site.baseurl }}/styles/app-theme.html">
  <style>
    [unresolved] > * {
      display: none !important;
    }
  </style>
</head>
<body unresolved class="fullbleed layout vertical">

<app-drawer-layout id="paperDrawerPanel">
  <app-drawer slot="drawer" id="drawer">
    {% include navigation.html %}
  </app-drawer>

  <app-header-layout mode="waterfall">
    <app-header slot="header" fixed>
      <app-toolbar id="mainToolbar">
        <paper-icon-button id="paperToggle"
            icon="menu" drawer-toggle></paper-icon-button>
        <div main-title class="top title">
          Chrome DevTools Protocol Viewer
          {% if page.version %}
            - {{ page.version }}
          {% endif %}
        </div>
        {% if page.category %}
        <cr-search-control id="searchButton"
            protocol-src="{{ site.baseurl }}/search_index/{{ page.category }}.json"></cr-search-control>
        {% endif %}
      </app-toolbar>
    </app-header>

    <div class="content">
      {% if page.idx %}
        {% assign domain = site.data[page.category].protocol.domains[page.idx] %}
        {% include domain.html domain=domain %}
      {% else %}
        <paper-material elevation="1" class="home-page-content">
          {% include github-badge.html %}
          {{ content }}
        </paper-material>
      {% endif %}
    </div>
  </app-header-layout>
</app-drawer-layout>
<script>
window.addEventListener('load', function() {
  var btn = document.getElementById('searchButton');
  var toolbar = document.getElementById('mainToolbar');
  btn.addEventListener('active', function() {
    toolbar.classList.add('search-active');
  }, false);
  btn.addEventListener('inactive', function() {
    toolbar.classList.remove('search-active');
  }, false);
});
window.addEventListener('WebComponentsReady', function() {
  document.querySelector('app-header-layout').resetLayout();
});
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-60854461-3', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>
